<!--
 * @Author: your name
 * @Date: 2020-09-11 14:44:13
 * @LastEditTime: 2020-09-11 17:03:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \industry-park-iot-page\src\views\spread\execl.vue
-->
<template>
<div ref='div'>
    <div id="x-spreadsheet-demo"></div>

</div>
</template>

<script>
import Spreadsheet from "x-data-spreadsheet";
import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';
Spreadsheet.locale('zh-cn', zhCN);
const s = null;
export default {
    mounted() {
        this.width = this.$refs.div.clientWidth||this.$refs.div.offsetWidth;
        this.height = this.$refs.div.clientHeight||this.$refs.div.offsetHeight;
        const s = new Spreadsheet("#x-spreadsheet-demo", this.options)
            .loadData({}) // load data
            .change(data => {
                // save data to db
            });
        s.validate()
    },
    data() {
        return {
            options: {
                mode: 'edit', // edit | read
                showToolbar: true,
                showGrid: true,
                showContextmenu: true,
                view: {
                    height: () =>this.height|| document.documentElement.clientHeight,
                    width: () => this.width ||document.documentElement.clientWidth,
                },
                row: {
                    len: 100,
                    height: 25,
                },
                col: {
                    len: 26,
                    width: 100,
                    indexWidth: 60,
                    minWidth: 60,
                },
                style: {
                    bgcolor: '#ffffff',
                    align: 'left',
                    valign: 'middle',
                    textwrap: false,
                    strike: false,
                    underline: false,
                    color: '#0a0a0a',
                    font: {
                        name: 'Helvetica',
                        size: 10,
                        bold: false,
                        italic: false,
                    },
                },
            }
        }
    }
}
</script>

<style lang="sass">

</style>
